<template>
  <el-dialog
      v-model="templateDetailWinDialogVisible"
      title="查看检测模板信息"
      width="80%"
  >
    <template #default>
      <el-descriptions>
          <el-descriptions-item label="模板编号">
            {{template.templateId}}
          </el-descriptions-item>
          <el-descriptions-item label="模板名称">
            {{template.templateName}}
          </el-descriptions-item>
          <el-descriptions-item label="检测种类">
            {{template.templateType}}
          </el-descriptions-item>
          <el-descriptions-item label="是否启用">
          </el-descriptions-item>
      </el-descriptions>
      <!-- 数据列表 -->
      <el-tabs type="border-card">
        <el-tab-pane label="检测项">
          <!-- 工具栏 -->
          <el-row style="margin: 0px 10px;background-color: ghostwhite;padding: 0px 10px">
            <el-col :span="24">
              <el-button-group>
                <el-button @click="showAddDetectItemWin" type="primary"><el-icon><Plus /></el-icon>新增</el-button>
                <el-button @click="toDetectItemEdits" type="primary"><el-icon><Edit/></el-icon>修改</el-button>
              </el-button-group>
            </el-col>
          </el-row>
          <el-table :data="detectItem" border stripe ref="detectItemTable">
            <el-table-column type="selection" width="55"/>
            <el-table-column prop="detectionName" label="检测项名称"/>
            <el-table-column prop="detectionType" label="检测项类型"/>
            <el-table-column prop="detectionTool" label="检测工具"/>
            <el-table-column prop="detectionMethod" label="检测方法"/>
            <el-table-column prop="Standard" label="标准值"/>
            <el-table-column prop="unit" label="单位"/>
            <el-table-column prop="errorCap" label="误差上限"/>
            <el-table-column prop="errorLow" label="误差上限"/>
            <el-table-column label="操作" width="330">
              <template #default="scope">
                <el-button-group>
                  <el-button @click="toDetectItemEdit(scope.row.detectionId)" size="small" type="primary">修改</el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
          <!--  分页栏 -->
          <el-row style="margin: 0px 10px;padding: 0px 15px">
            <el-col :span="24">
              <el-pagination @change="detectItemChangePage" background layout="prev, pager, next" :total="detectItemTotal"/>
            </el-col>
          </el-row>
        </el-tab-pane>
        <!-- 新增检测项的弹窗 -->
        <el-dialog v-model="detectItemAddWinDialogVisible"
                   title="新增检测项"
                   width="50%"
        >
          <template #default>
            <el-form :model="newDetectItem" label-width="auto">
              <el-form-item label="检测项名称">
                <el-input v-model="newDetectItem.detectionName"/>
              </el-form-item>
              <el-form-item label="检测项类型">
                <el-input v-model="newDetectItem.detectionType"/>
              </el-form-item>
              <el-form-item label="检测工具">
                <el-input v-model="newDetectItem.detectionTool"/>
              </el-form-item>
              <el-form-item label="检测方法">
                <el-input v-model="newDetectItem.detectionMethod"/>
              </el-form-item>
              <el-form-item label="标准值">
                <el-input v-model="newDetectItem.Standard"/>
              </el-form-item>
              <el-form-item label="单位">
                <el-input v-model="newDetectItem.unit"/>
              </el-form-item>
              <el-form-item label="误差上限">
                <el-input v-model="newDetectItem.errorCap"/>
              </el-form-item>
              <el-form-item label="误差下限">
                <el-input v-model="newDetectItem.errorLow"/>
              </el-form-item>
            </el-form>
          </template>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="addDetectItemSubmit">确定</el-button>
              <el-button @click="cancelDetectItem">取消</el-button>
            </div>
          </template>
        </el-dialog>


        <!-- 数据列表 -->
        <el-tab-pane label="物料产品">
          <!-- 工具栏 -->
          <el-row style="margin: 0px 10px;background-color: ghostwhite;padding: 0px 10px">
            <el-col :span="24">
              <el-button-group>
                <el-button @click="showAddMaterialItemWin" type="primary"><el-icon><Plus /></el-icon>新增</el-button>
                <el-button @click="toMaterialItemEdits" type="primary"><el-icon><Edit/></el-icon>修改</el-button>
              </el-button-group>
            </el-col>
          </el-row>

          <el-table :data="materialItem" border stripe ref="materialItemTable">
                <el-table-column type="selection" width="55"/>
                <el-table-column prop="materialId" label="产品物料编码"/>
                <el-table-column prop="materialName" label="产品物料名称"/>
                <el-table-column prop="Model" label="规格型号"/>
                <el-table-column prop="testLow" label="最低检测数"/>
                <el-table-column prop="unit" label="单位"/>
                <el-table-column prop="numberTop" label="最大不合格数"/>
                <el-table-column prop="fatal" label="最大致命缺陷率"/>
                <el-table-column prop="severe" label="最大严重缺陷率"/>
                <el-table-column prop="slight" label="最大轻微缺陷率"/>
                <el-table-column label="操作" width="330">
                  <template #default="scope">
                    <el-button-group>
                      <el-button @click="toMaterialItemEdit(scope.row.materialId)" size="small" type="primary">修改</el-button>
                    </el-button-group>
                  </template>
                </el-table-column>
              </el-table>
              <!--  分页栏 -->
              <el-row style="margin: 0px 10px;padding: 0px 15px">
                <el-col :span="24">
                  <el-pagination @change="materialItemChangePage" background layout="prev, pager, next" :total="materialItemTotal"/>
                </el-col>
              </el-row>
        </el-tab-pane>

        <!-- 新增物料产品的弹窗 -->
        <el-dialog v-model="materialItemAddWinDialogVisible"
                   title="新增物料产品"
                   width="50%"
        >
          <template #default>
            <el-form :model="newMaterialItem" label-width="auto">
              <el-form-item label="产品物料编码">
                <el-input v-model="newMaterialItem.materialId"/>
              </el-form-item>
              <el-form-item label="产品物料名称">
                <el-input v-model="newMaterialItem.materialName"/>
              </el-form-item>
              <el-form-item label="规格型号">
                <el-input v-model="newMaterialItem.Model"/>
              </el-form-item>
              <el-form-item label="最低检测数">
                <el-input v-model="newMaterialItem.testLow"/>
              </el-form-item>
              <el-form-item label="单位">
                <el-input v-model="newMaterialItem.unit"/>
              </el-form-item>
              <el-form-item label="最大不合格数">
                <el-input v-model="newMaterialItem.numberTop"/>
              </el-form-item>
              <el-form-item label="最大致命缺陷率">
                <el-input v-model="newMaterialItem.fatal"/>
              </el-form-item>
              <el-form-item label="最大严重缺陷率">
                <el-input v-model="newMaterialItem.severe"/>
              </el-form-item>
              <el-form-item label="最大轻微缺陷率">
                <el-input v-model="newMaterialItem.slight"/>
              </el-form-item>
            </el-form>
          </template>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="addMaterialItemSubmit">确定</el-button>
              <el-button @click="cancelMaterialItem">取消</el-button>
            </div>
          </template>
        </el-dialog>

      </el-tabs>



      <el-button @click="templateDetailWinDialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>


  <!-- 编辑子组件 -->
  <detectItemEdit :detection-id="editDetectItemId" @cancel-edit="cancelDetectItemEdit" @editComplete="loadDetectItem()"/>

  <!-- 编辑子组件 -->
  <materialItemEdit :material-id="editMaterialItemEditId" @cancel-edit="cancelMaterialItemEdit" @editComplete="loadMaterialItem()"/>


</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import TemplateRequest from "@/api/Template.js";
import detectItemRequest from "@/api/detectItem.js";
import materialItemRequest from "@/api/materialItem.js";
import {ElMessage} from "element-plus";
import detectItemEdit from "@/views/qc/testingTemplate/template-detail-edit.vue";
import materialItemEdit from "@/views/qc/testingTemplate/template-material-edit.vue";



// 申明组件的属性
const props = defineProps(['templateId']);
// 弹窗标记
let templateDetailWinDialogVisible = ref(false);
// 弹窗标记
let detectItemAddWinDialogVisible = ref(false);
// 弹窗标记
let materialItemAddWinDialogVisible = ref(false);

// 详情对象
let template = ref({})

// 查询的项目列表
let detectItem = ref([]);
let detectItemTable = ref(null);
// 查询的项目列表
let materialItem = ref([]);
let materialItemTable = ref(null);

// 总条数，默认0
let detectItemTotal = ref(0);
// 总条数，默认0
let materialItemTotal = ref(0);

// 当前页码，默认1
let detectItemCurPage = ref(1);
// 当前页码，默认1
let materialItemCurPage = ref(1);
let detectItemQuery = ref({});
let materialItemQuery = ref({});
// 保存新增项的表单的数据
let newDetectItem = ref({});
// 保存新增项的表单的数据
let newMaterialItem = ref({});


// 编辑
let editDetectItemId = ref(-1);
// 编辑
let editMaterialItemEditId = ref(-1);




/**
 * 工具栏编辑按钮事件
 */
function toMaterialItemEdits(){
  let selectedRows = materialItemTable.value.getSelectionRows();
  if(selectedRows.length > 1){
    ElMessage({
      type:"warning",
      message:"编辑只能编辑一条数据"
    });
  }else if (selectedRows.length == 0){
    ElMessage({
      type:"warning",
      message:"你没有选中任何数据"
    });
  }else{
    toMaterialItemEdit(selectedRows[0].materialId);
  }
}
function cancelMaterialItemEdit(){
  editMaterialItemEditId.value = -1;
}

/**
 * 行编辑按钮事件
 * @param materialId
 */
function toMaterialItemEdit(materialId) {
  editMaterialItemEditId.value = materialId;
  console.log(editMaterialItemEditId.value);
}
/**
 * 编辑完成的事件
 */
function editMaterialItemCompletes(){
  // 更新数据表
  cancelMaterialItemEdit();
}









/**
 * 工具栏编辑按钮事件
 */
function toDetectItemEdits(){
  let selectedRows = detectItemTable.value.getSelectionRows();
  if(selectedRows.length > 1){
    ElMessage({
      type:"warning",
      message:"编辑只能编辑一条数据"
    });
  }else if (selectedRows.length == 0){
    ElMessage({
      type:"warning",
      message:"你没有选中任何数据"
    });
  }else{
    toDetectItemEdit(selectedRows[0].templateId);
  }
}
function cancelDetectItemEdit(){
  editDetectItemId.value = -1;
}

/**
 * 行编辑按钮事件
 * @param detectionId
 */
function toDetectItemEdit(detectionId) {
  editDetectItemId.value = detectionId;
  console.log(editDetectItemId.value);
}
/**
 * 编辑完成的事件
 */
function editCompletesSSSSS(){
  // 更新数据表
  cancelDetectItemEdit();
}




//新增事件
function showAddMaterialItemWin() {
  materialItemAddWinDialogVisible.value = true;
}

//新增物料产品的提交按钮事件
function addMaterialItemSubmit() {
  materialItemRequest.saveMaterialItem(newMaterialItem.value, res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "添加成功"
      });
      cancelMaterialItem();
    } else if (res.code == 300) {
      ElMessage({
        type: "warning",
        message: "项目编号重复"
      });
    } else {
      ElMessage({
        type: "warning",
        message: "项目添加失败"
      });
    }
  })
}
// 取消新增项目的按钮事件
function cancelMaterialItem() {
  // 将newProject置空
  newMaterialItem = ref({});
  // 关闭弹窗
  materialItemAddWinDialogVisible.value = false;
}





//新增事件
function showAddDetectItemWin() {
  detectItemAddWinDialogVisible.value = true;
}

//新增检测项的提交按钮事件
function addDetectItemSubmit() {
  detectItemRequest.saveDetectItem(newDetectItem.value, res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "添加成功"
      });
      cancelDetectItem();
    } else if (res.code == 300) {
      ElMessage({
        type: "warning",
        message: "项目编号重复"
      });
    } else {
      ElMessage({
        type: "warning",
        message: "项目添加失败"
      });
    }
  })
}
// 取消新增项目的按钮事件
function cancelDetectItem() {
  // 将newProject置空
  newDetectItem = ref({});
  // 关闭弹窗
  detectItemAddWinDialogVisible.value = false;
}




// 通过id加载
function loadTemplateById(){
  TemplateRequest.selectById(props.templateId,res=>{
    if(res.data){
      template.value = res.data;
      console.log(template.value)
      templateDetailWinDialogVisible.value = true;
    }
  });
}


//加载检测项列表
function loadDetectItem() {
  // 调用API来查询项目列表
  detectItemRequest.loadDetectItem(detectItemQuery.value, detectItemCurPage.value, 10, res => {
    // 这里的res就是后端返回的结果
    // 总条数赋值
    detectItemTotal.value = res.data.total;
    console.log(detectItemTotal.value)
    // 将查询的列表赋值给defects
    detectItem.value = res.data.list;
  })
}

//加载物料列表
function loadMaterialItem() {
  // 调用API来查询项目列表
  materialItemRequest.loadMaterials(materialItemQuery.value, materialItemCurPage.value, 10, res => {
    // 这里的res就是后端返回的结果
    // 总条数赋值
    materialItemTotal.value = res.data.total;
    console.log(materialItemTotal.value)
    // 将查询的列表赋值给defects
    materialItem.value = res.data.list;
  })
}

// 检测项分页事件
function detectItemChangePage(value) {
  detectItemCurPage.value = value;
  loadDetectItem();
}
// 物料分页事件
function materialItemChangePage(value) {
  materialItemCurPage.value = value;
  loadMaterialItem();
}


// 属性侦听
watch(()=>props.templateId,()=>{
  if(props.templateId){
    loadTemplateById();
  }
});
onMounted(() => {
  loadTemplateById();
  loadDetectItem();
  detectItemChangePage();
  loadMaterialItem();
});

</script>